<!--
 * @Author: C.
 * @Date: 2023-12-12 10:08:08
-->
<template>
  <PageWrapper title="表单">
    <BaseForm @register="register" />
    <view class="tn-mt tn-flex-center">
      <TnButton size="lg" @click="submitF"> 提交 </TnButton>
      <TnButton size="lg" @click="resetF"> reset </TnButton>
      <TnButton size="lg" @click="setF"> 赋值 </TnButton>
      <TnButton size="lg" @click="getF"> 取值 </TnButton>
    </view>
  </PageWrapper>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { ref } from 'vue'

// ----------------------------- hooks -----------------------------

// ----------------------------- 组件 -----------------------------
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import PageWrapper from '@/components/page-wrapper'
import { BaseForm, useForm } from '@/components/form'

// ----------------------------- 其他引入 -----------------------------
import { DeviceStateEnum } from '@/maps/device/DeviceStateEnum'

//----------------------------- 变量声明区 -----------------------------

// ----------------------------- hooks使用区 -----------------------------
const [register, { validate, reset, setFieldsValue, getFieldsValue }] = useForm(
  {
    schemas: [
      {
        label: '账号',
        field: 'account',
        component: 'Input',
        defaultValue: 'cj1',
        componentProps: {
          textAlign: 'center',
        },
        rules: [
          {
            required: false,
            message: '请输入用户名',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
      },
      {
        label: '姓名',
        field: 'name',
        component: 'Input',
        required: true,
        defaultValue: 'csdfds',
      },
      {
        label: 'Switch',
        field: 'Switch',
        component: 'Switch',
        defaultValue: false,
      },
      {
        label: 'InputNumber',
        field: 'InputNumber',
        component: 'InputNumber',
        defaultValue: 1,
      },
      {
        label: 'CheckBox',
        field: 'CheckBox',
        component: 'CheckBox',
        componentProps: {
          options: DeviceStateEnum.getEnums(),
        },
      },
      {
        label: 'Radio',
        field: 'Radio',
        component: 'Radio',
        defaultValue: 'Standby',
        componentProps: {
          options: DeviceStateEnum.getEnums(),
        },
      },
      {
        label: 'Select',
        field: 'Select',
        component: 'Select',
        defaultValue: 'Standby',
        componentProps: {
          options: DeviceStateEnum.getEnums(),
        },
      },
      {
        label: 'Slider',
        field: 'Slider',
        component: 'Slider',
        defaultValue: 50,
      },
      {
        label: 'TimePicker',
        field: 'TimePicker',
        component: 'TimePicker',
        componentProps: {
          mode: 'time',
        },
      },
      {
        label: 'StartDate',
        field: 'StartDate',
        component: 'DatePicker',
      },
      {
        label: 'EndDate',
        field: 'EndDate',
        component: 'DatePicker',
      },
      {
        label: 'DatePicker2',
        field: 'DatePicker2',
        component: 'DatePicker',
        componentProps: {
          mode: 'range',
          startField: 'StartDate',
          endField: 'EndDate',
        },
      },
      {
        label: 'RegionPicker',
        field: 'RegionPicker',
        component: 'RegionPicker',
        defaultValue: ['广东省', '广州市', '番禺区'],
      },
      {
        label: 'WeekPicker',
        field: 'WeekPicker',
        component: 'WeekPicker',
      },
      {
        label: 'Upload',
        field: 'Upload',
        component: 'Upload',
        defaultValue: [
          'http://www.jverp.com:8101//Files/1688439390621138945.jpg',
        ],
      },
    ],
  }
)
// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
async function submitF() {
  const data = await validate()
  console.log(data)
}
function resetF() {
  reset()
}
function setF() {
  setFieldsValue({
    account: 'ssss',
    InputNumber: 2,
  })
}
function getF() {
  console.log(getFieldsValue())
}
</script>
<style lang="less" scoped></style>
